<!DOCTYPE html>
<html>
<head>
	<title>Manthano</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="utf-8">
	<!-- Bootstrap CSS -->
	<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
	<style type="text/css">
	@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css);

	.login-or {
		position: relative;
		font-size: 18px;
		color: #aaa;
		margin-top: 10px;
		margin-bottom: 10px;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.span-or {
		display: block;
		position: absolute;
		left: 50%;
		top: -2px;
		margin-left: -25px;
		background-color: #fff;
		width: 50px;
		text-align: center;
	}
	.hr-or {
		background-color: #cdcdcd;
		height: 1px;
		margin-top: 0px !important;
		margin-bottom: 0px !important;
	}

	.btn-social{
		position:relative;
		padding-left:44px;
		text-align:left;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis
	}
	.btn-social :first-child{
		position:absolute;
		left:0;
		top:0;
		bottom:0;
		width:32px;
		line-height:34px;
		font-size:1.6em;
		text-align:center;
		border-right:1px solid rgba(0,0,0,0.2)
	}

	.btn-social.btn-lg{
		padding-left:61px
	}
	.btn-social.btn-lg :first-child{
		line-height:45px;
		width:45px;
		font-size:1.8em
	}

	.btn-social.btn-sm{
		padding-left:38px
	}
	.btn-social.btn-sm :first-child{
		line-height:28px;
		width:28px;
		font-size:1.4em
	}

	.btn-social.btn-xs{
		padding-left:30px
	}
	.btn-social.btn-xs :first-child{
		line-height:20px;
		width:20px;
		font-size:1.2em
	}

	.btn-social-icon{
		position:relative;
		padding-left:44px;
		text-align:left;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
		height:34px;
		width:34px;
		padding-left:0;
		padding-right:0
	}
	.btn-social-icon :first-child{
		position:absolute;
		left:0;
		top:0;
		bottom:0;
		width:32px;
		line-height:34px;
		font-size:1.6em;
		text-align:center;
		border-right:1px solid rgba(0,0,0,0.2)
	}

	.btn-social-icon.btn-lg{
		padding-left:61px
	}
	.btn-social-icon.btn-lg :first-child{
		line-height:45px;
		width:45px;
		font-size:1.8em
	}

	.btn-social-icon.btn-sm{
		padding-left:38px
	}
	.btn-social-icon.btn-sm :first-child{
		line-height:28px;
		width:28px;
		font-size:1.4em
	}

	.btn-social-icon.btn-xs{
		padding-left:30px
	}
	.btn-social-icon.btn-xs :first-child{
		line-height:20px;
		width:20px;
		font-size:1.2em
	}

	.btn-social-icon :first-child{
		border:none;
		text-align:center;
		width:100% !important
	}

	.btn-social-icon.btn-lg{
		height:45px;
		width:45px;
		padding-left:0;
		padding-right:0
	}

	.btn-social-icon.btn-sm{
		height:30px;
		width:30px;
		padding-left:0;
		padding-right:0
	}

	.btn-social-icon.btn-xs{
		height:22px;
		width:22px;
		padding-left:0;
		padding-right:0
	}


	.btn-facebook{
		color:#fff;
		background-color:#3b5998;
		border-color:rgba(0,0,0,0.2)
	}
	.btn-facebook:hover,.btn-facebook:focus,.btn-facebook:active,.btn-facebook.active,.open .dropdown-toggle.btn-facebook{
		color:#fff;
		background-color:#30487b;
		border-color:rgba(0,0,0,0.2)
	}

	.btn-facebook:active,.btn-facebook.active,.open .dropdown-toggle.btn-facebook{
		background-image:none
	}

	.btn-facebook.disabled,.btn-facebook[disabled],fieldset[disabled] .btn-facebook,.btn-facebook.disabled:hover,.btn-facebook[disabled]:hover,fieldset[disabled] .btn-facebook:hover,.btn-facebook.disabled:focus,.btn-facebook[disabled]:focus,fieldset[disabled] .btn-facebook:focus,.btn-facebook.disabled:active,.btn-facebook[disabled]:active,fieldset[disabled] .btn-facebook:active,.btn-facebook.disabled.active,.btn-facebook[disabled].active,fieldset[disabled] .btn-facebook.active{
		background-color:#3b5998;
		border-color:rgba(0,0,0,0.2)
	}



	.btn-google-plus{

		color:#fff;
		background-color:#dd4b39;
		border-color:rgba(0,0,0,0.2)
	}
	.btn-google-plus:hover,.btn-google-plus:focus,.btn-google-plus:active,.btn-google-plus.active,.open .dropdown-toggle.btn-google-plus{

		color:#fff;
		background-color:#ca3523;
		border-color:rgba(0,0,0,0.2)
	}

	.btn-google-plus:active,.btn-google-plus.active,.open .dropdown-toggle.btn-google-plus{

		background-image:none
	}

	.btn-google-plus.disabled,.btn-google-plus[disabled],fieldset[disabled] .btn-google-plus,.btn-google-plus.disabled:hover,.btn-google-plus[disabled]:hover,fieldset[disabled] .btn-google-plus:hover,.btn-google-plus.disabled:focus,.btn-google-plus[disabled]:focus,fieldset[disabled] .btn-google-plus:focus,.btn-google-plus.disabled:active,.btn-google-plus[disabled]:active,fieldset[disabled] .btn-google-plus:active,.btn-google-plus.disabled.active,.btn-google-plus[disabled].active,fieldset[disabled] .btn-google-plus.active{

		background-color:#dd4b39;
		border-color:rgba(0,0,0,0.2)
	}


	</style>
</head>
<body>
	<div class="jumbotron">
		<div class="container">	
			<h1>
				<ul class="list-inline">
					<a href="index.html">

						<img src="img/manthano-header.png" class="img-responsive " alt="Manthano" style="height:100px;
						"> 
						<!--Manthano -->
					</a>
				</ul>
			</h1>

		</div>
	</div>

	<div class="container">

		<div class="panel panel-default">
			<div class="panel-body">
				<div class="row">

					<div class="col-md-6 form-group">

						<legend>Logovanje</legend><!--
						<div class="row">
							<div class="col-xs-6 col-sm-6 col-md-6">
								<a class="btn btn-block btn-social btn-facebook">
									<i class="fa fa-facebook"></i> Facebook logovanje
								</a>
							</div>
							<div class="col-xs-6 col-sm-6 col-md-6">
								<a class="btn btn-block btn-social btn-google-plus">
									<i class="fa fa-google-plus"></i> Google logovanje
								</a>

							</div>
						</div>

						<div class="login-or">
							<hr class="hr-or">
							<span class="span-or">ili</span>
						</div>
-->
						<form role="form">
							<div class="form-group">
								<label for="inputUsernameEmail">email</label>
								<div class="input-group">
									<span class="input-group-addon">@</span>
									<input type="email" class="form-control" id="inputUsernameEmail" required>
								</div>
							</div>
							<div class="form-group">
								<a class="pull-right" href="/user/forgot_password">Zaboravili ste lozinku?</a>
								<label for="inputPassword">Lozinka</label>
								<div class="input-group">
									<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
									<input type="password" class="form-control" id="inputPassword" required>
								</div>
							</div>
							<div class="checkbox pull-right">
								<label>
									<input type="checkbox">
									Zapamti me </label>
								</div>
								<button type="submit" class="btn btn btn-primary">
									Uloguj me
								</button>
							</form>


						</div>

						<div class="col-md-6">
							<form action="onRegister.html" method="POST" role="form" class="form-group">
								<legend>Registracija</legend>

								<div class="form-group">
									<label for="name-input">Ime i prezime</label>
									<input type="text" class="form-control" id="name-input" placeholder="npr. Pera Perić" required>
								</div>
								<div class="form-group">

									<label for="email-input">email</label>
									<input type="email" class="form-control" id="email-input" placeholder="npr. pera.peric@matf.bg.ac.rs" required>
								</div>
								<div class="form-group">
									<div class="row">
										<div class="col-md-6">
											<div class="form-group">
												<label for="password-input">Lozinka</label>
												<input type="password" class="form-control" id="password-input" placeholder="min 6 karaktera" required>
											</div>
										</div>
										<div class="col-md-6">
											<div class="form-group ">
												<label for="password-confirm-input">Ponovi lozinku</label>
												<input type="password" class="form-control" id="password-confirm-input" placeholder="ponovi lozinku" required>
											</div>
										</div>
									</div>
								</div>
								<button type="submit" class="btn btn-primary pull-left">Registruj me</button>
							</form>

						</div>

					</div>
				</div>

				<div class="panel-footer">
					&copy; Matematički fakultet u Beogradu 2013
				</div>
			</div>

		</div>
	</div>

	<!-- jQuery -->
	<script src="https://code.jquery.com/jquery.js"></script>
	<!-- Bootstrap JavaScript -->
	<script src="js/bootstrap.min.js"></script>
</body>
</html>